<template>
<div class="switch-container">
  <div class="switch">
      <img :src="on?imgon:imgoff" alt=""  @click="toggle()">
  </div>
 
</div>
</template>

<script>
export default {
  components:{
    
  },
 methods:{
     toggle (event) {
        this.on = !this.on
        this.$emit('toggleChange', this.on)
      }
 },
  name:"switcher",
   data(){
     return{
         imgon:require('../../images/Handle@2x.png'),
         imgoff:require('../../images/Handle2@2x.png')
     }  
   },
    props: {
   	    on: false
    }
}
</script>

<style lang="less">
.switch-container{
        padding: 0;
          position: relative;
           width:.93rem;
            height:.5rem;
            display: flex;
            align-items: center;
          .switch{
              img{
                width:.93rem;
                height:.5rem;
              

              }
          }
}
  
</style>
